<template>
    <div id="wrap-suggssion">
        <div style="border-top: 8px solid rgb(246, 246, 246);">
            <textarea name="" id="textarea"  maxlength="200" placeholder="请描述您遇到的问题或想反馈的意见 （必填）" v-model="desc"></textarea>
        </div>
        <div class="wrap-inner">
            <div class="clearfloat">
                <span v-cloak>{{remnant}}/200</span>
            </div>
            <div class="add">
                <van-uploader :after-read="afterRead" :multiple="false" @delete="deletedata"  :max-count="8"    v-model="fileList"/>
            </div>
            <div class="tel">
                <input type="text" placeholder="请留下您的电话或邮箱（选填）" v-model="tel">
            </div>
        </div>

        <div class="submit">
            <mt-button size="small" type="primary" @click="submit($event)" >提交</mt-button>
        </div>
    </div>
</template>

<script>
    import { Button } from 'mint-ui';
    import { Uploader } from 'vant';
    Vue.use(Uploader);
    Vue.component(Button.name, Button);
    import {pageConfig} from '@/config';
    export default {
        name: 'suggession',
        data(){
            return {
                desc: '',
                images: [],
                tel: '',
                fileList: []
            }
        },
        created: function () {
            if (this.$native.is)
                if (!this.$user.is_login()) {
                    this.$user.jumpLogin();
                }
        },
        methods: {
            deletedata(a, b){
                console.log(a);
                console.log(b)
                let index = b.index;
                this.images.splice(index, 1);
            },
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                if (this.$util.isArray(file)) {
                    let that = this;
                    file.forEach(function (a) {
                        that.$http.$upload(a).then(function (res) {
                            this.images.push(res.data.url);
                        })
                    }).catch((res) => {
                        return false;
                    })
                } else {
                    this.$http.$upload(file).then((res) =>{
                        this.images.push(res.data.url);
                    }).catch((res) => {
                        return false;
                    })
                }

                return true;
            },
            submit() {
                if (this.desc === '') {
                    this.$toast('请填写建议');
                    return;
                }

                this.$http.$ajax('suggession', pageConfig.public, {
                    content: this.desc,
                    images: this.images,
                    tel: this.tel
                }, {loading: '提交中...', success:(res)=> {
                    console.log(res);
                    this.$toast('提交成功');
                }});
            }
        },
        computed: {
            remnant: function () {
                let txtVal = this.desc.length;
                return txtVal;
            }
        }
    }
</script>
<style scoped>
    /deep/ .mint-button--primary {
        background-color: #6A74F6;
        width: 260px;
    }

    input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #959595;
        /* placeholder字体大小  */
        font-size: 26px;
    }
    #wrap-suggssion {
        height: 100vh;
        background-color: #F6F6F6;
    }

    .wrap-inner {
        background-color: #fff;
    }
    .submit{
        margin-top: 80px;
        color: #ffffff;
        font-size: 32px;
        display: flex;
        justify-content: center;
    }
    textarea{
        min-width: 90%;
        min-height: 300px;
        max-width: 90%;
        max-height: 300px;
        border: none;
        outline: none;
        margin-left: 0.5%;
        padding: 34px 32px;
        font-size: 26px;
    }
    .clearfloat:after{
        display:block;
        clear:both;
        content:"";
        visibility:
                hidden;height:0
    }
    .clearfloat{
        zoom:1
    }
    .clearfloat span{
        float: right;
        font-size: 24px;
        color: #959595;
        margin-right: 23px;
    }
    .add{
        position: relative;
        margin-left: 29px;
        margin-right: 29px;
        margin-top: 30px;
        padding-bottom: 27px;
        border-bottom: 3px dashed #959595;
        display: flex;
        align-items: center;
    }
    .add img{
        width: 106px;
        height: 106px;
    }
    .showimg-img {
        width: 106px;
        height: 106px;
    }
    #docpicker{
        width: 106px;
        height: 106px;
        position: absolute;
        left: 0;
        top: 0;
        outline: none;
        filter: alpha(opacity=0);
        opacity: 0;
    }
    .tel{
        padding: 32px 43px;
    }
    .tel input{
        border: none;
        background: none;
        outline: none;
        width: 100%;
    }
</style>
